var chartDom5 = document.getElementById("echarts5");
var graduate1 = document.querySelector(".graduate1");
var graduate2 = document.querySelector(".graduate2");
var graduate3 = document.querySelector(".graduate3");
const person = document.querySelector(".person"); //大盒子容器
const ul = document.querySelector(".select"); //隐藏的下拉标签
person.onmousemove = function () {
  ul.style.display = "block";
};
person.onmouseout = function () {
  ul.style.display = "none";
};
graduate2.onclick = function () {
  graduate1.innerHTML = "研究生" + '<div class="down"></div>';
  ajax("postgraduate");
};
graduate3.onclick = function () {
  graduate1.innerHTML = "本科生" + '<div class="down"></div>';
  ajax("undergraduate");
};
var myChart5 = echarts.init(chartDom5);
var period = [];
var branch = [];
var newRes;
var option5;

function ajax(data) {
  if (!data) {
    data = "undergraduate";
  }
  $.ajax({
    url: "/large-screen/accessControlDevice/selectSevenWeeksDayInAndOutByRegion",
    type: "GET",
    data: {
      type: data,
    },
    crossDomain: true,
    dataType: "json",
    async: false,
    success: function (res) {
      newRes = res.data.reverse();
      period = newRes.map((item) => {
        let str1 = item.startTime;
        let str2 = item.endTime;
        return str1.substring(5) + "-" + str2.substring(5);
      });
      branch = newRes[0].doorPersonList.map((item) => {
        return item.doorName;
      });
    },
    error: function (xhr, status) {
      console.log(status);
    },
  });
  option5 = {
    // color: ['#D53A35', '#E98F6F', '#6AB0B8', '#334B5C'],
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(50,50,50,0)", // tooltip默认背景为白色，手动置为透明
      borderWidth: 0,
      /* textStyle: {
        color: "#fff",
        fontSize: 13,
      }, */
      formatter: function (params) {
        let html = "";
        html += `<div style="color: #fff;font-size: 16px;padding: 16px;
                  background: linear-gradient(180deg, rgba(255,255,255,0.44) 0%, rgba(255,255,255,0.1) 22%, rgba(255,255,255,0) 46%, rgba(255,255,255,0.28) 77%, rgba(255,255,255,0.4) 100%);
                  border-radius: 10px;border: 1px solid;border-image: radial-gradient(circle, rgba(111, 185, 242, 0.86), rgba(0, 0, 0, 0.2)) 1 1;
                  backdrop-filter: blur(10px);">
                    <div>
                      <div style="margin-bottom: 16px;">${params[0].name}</div>
                      ${params
                        .map((item) => {
                          let str = "";
                          str += `<div style="margin-bottom: 12px;text-align: left;">
                                  <span style="font-size: 14px;">${item.seriesName}</span>
                                  <span style="margin-left: 16px;color: ${item.color};float: right;">${item.value}人</span>
                                </div>`;
                          return str;
                        })
                        .join("")}
                    </div>
                  </div>`;
        return html;
      },
    },
    grid: {
      top: "12%",
      bottom: "5%",
      left: "2%",
      right: "4%",
      containLabel: true,
    },
    legend: {
      type: "plain",
      icon: "rect",
      // bottom: '18%',
      top: "2%",
      right: "2%",
      itemWidth: 14,
      itemHeight: 4,
      itemGap: 11,
      // orient:'vertical',
      symbolKeepAspect: false,
      textStyle: {
        color: "#fff",
      },
      data: branch,
    },
    xAxis: {
      type: "category",
      //name: '日期',
      boundaryGap: false,
      axisLine: {
        show: false,
        lineStyle: {
          color: "#AAA",
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: "#AAAAAA",
      },
      data: period,
    },
    yAxis: {
      name: "人",
      type: "value",
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: "#AAA",
      },
      splitLine: {
        lineStyle: {
          type: "dotted",
          color: "#AAA",
        },
      },
    },
    series: [
      {
        name: branch[0],
        type: "line",
        // stack: "总量",
        data: newRes.map((item) => {
          return item.doorPersonList[0].count;
        }),
        // 设置拐点 小圆点
        symbol: "circle",
        // 拐点大小
        symbolSize: 8,
        // 设置拐点颜色以及边框
        itemStyle: {
          // color: "#FFBAE3",
          borderColor: "rgba(221, 220, 107, .1)",
          borderWidth: 12,
        },
        // 开始不显示拐点， 鼠标经过显示
        showSymbol: false,
      },
      {
        name: branch[1],
        type: "line",
        // stack: "总量",
        data: newRes.map((item) => {
          return item.doorPersonList[1].count;
        }),
        // 设置拐点 小圆点
        symbol: "circle",
        // 拐点大小
        symbolSize: 8,
        // 设置拐点颜色以及边框
        itemStyle: {
          // color: "#FFBAE3",
          borderColor: "rgba(221, 220, 107, .1)",
          borderWidth: 12,
        },
        // 开始不显示拐点， 鼠标经过显示
        showSymbol: false,
      },
      {
        name: branch[2],
        type: "line",
        //smooth:true,
        // stack: "总量",
        data: newRes.map((item) => {
          return item.doorPersonList[2].count;
        }),
        // 设置拐点 小圆点
        symbol: "circle",
        // 拐点大小
        symbolSize: 8,
        // 设置拐点颜色以及边框
        itemStyle: {
          // color: "#FFBAE3",
          borderColor: "rgba(221, 220, 107, .1)",
          borderWidth: 12,
        },
        // 开始不显示拐点， 鼠标经过显示
        showSymbol: false,
      },
      {
        name: branch[3],
        type: "line",
        //smooth:true,
        // stack: "总量",
        data: newRes.map((item) => {
          return item.doorPersonList[3].count;
        }),
        // 设置拐点 小圆点
        symbol: "circle",
        // 拐点大小
        symbolSize: 8,
        // 设置拐点颜色以及边框
        itemStyle: {
          // color: "#FFBAE3",
          borderColor: "rgba(221, 220, 107, .1)",
          borderWidth: 12,
        },
        // 开始不显示拐点， 鼠标经过显示
        showSymbol: false,
      },
      {
        name: branch[4],
        type: "line",
        //smooth:true,
        // stack: "总量",
        data: newRes.map((item) => {
          return item.doorPersonList[4].count;
        }),
        // 设置拐点 小圆点
        symbol: "circle",
        // 拐点大小
        symbolSize: 8,
        // 设置拐点颜色以及边框
        itemStyle: {
          // color: "#FFBAE3",
          borderColor: "rgba(221, 220, 107, .1)",
          borderWidth: 12,
        },
        // 开始不显示拐点， 鼠标经过显示
        showSymbol: false,
      },
    ],
  };
  option5 && myChart5.setOption(option5);
}
ajax()
setInterval(() => {
  if (graduate1.innerText === '本科生') {
    ajax("undergraduate")
  } else {
    ajax("postgraduate")
  }
},1200000) 
